<template>
  <div class="page-container" :class="{ 'is-full': isFull }">
    <div class="page-title">
      <dv-decoration-8 :color="[mainColor, mainColor]" :reverse="true" class="title-img" />
      <h1>Feijiu实时数据监测平台</h1>
      <dv-decoration-8 :color="[mainColor, mainColor]" class="title-img" />
      <div class="top">
        <p class="text">更新时间：{{ updateTime }}</p>
        <i class="el-icon el-icon-refresh" @click="handleRefresh"></i>
        <i class="el-icon el-icon-full-screen" @click="handleFullScreen"></i>
      </div>
    </div>
    <div class="page-tab">
      <div class="tab-list">
        <div class="item" :class="{ active: active === 0 }" @click="handleTab(0)">活跃用户</div>
        <div class="item disable" :class="{ active: active === 1 }" @click="handleTab(1)">供求</div>
        <div class="item" :class="{ active: active === 2 }" @click="handleTab(2)">资产处置</div>
        <div class="item disable" :class="{ active: active === 3 }" @click="handleTab(3)">招标拍卖</div>
      </div>
    </div>
    <div class="tab-content">
      <member v-if="active === 0" :mainColor="mainColor" :mainColorOpcity="mainColorOpcity" :key="key + 1" @updateTime="handleUpdateTime"></member>
      <assets v-if="active === 2" :mainColor="mainColor" :mainColorOpcity="mainColorOpcity" :key="key + 3"></assets>
    </div>
  </div>
</template>

<script>
import member from './member/index.vue'
import assets from './assets/index.vue'
import { formatDate } from '@/utils'

export default {
  name: 'index',
  components: { member, assets },
  data() {
    return {
      updateTime: '',
      isFull: false,
      key: new Date().toLocaleTimeString(),
      mainColor: '#68cee0',
      mainColorOpcity: 'rgba(104, 206, 224, 0.3)',
      active: 0,
    }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 点击tab
    handleTab(index) {
      if (index === 2 || index === 0) {
        this.active = index
      } else {
        this.$toast('暂未开通')
      }
    },
    // 刷新
    handleRefresh() {
      this.key = new Date().toLocaleTimeString()
    },
    handleUpdateTime(updateTime) {
      if (updateTime) {
        this.updateTime = updateTime
      } else {
        this.updateTime = formatDate(new Date())
      }
    },
    // 全屏
    // 在全屏与非全屏之间来回切换
    handleFullScreen() {
      this.isFullScreen() ? this.exitFullScreen() : this.fullScreen()
    },
    /**实现F11全屏效果*/
    fullScreen() {
      if (this.isFullScreen()) return
      var docElm = document.documentElement
      /*W3C*/
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } /*FireFox */ else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      } /*Chrome等 */ else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      } /*IE11*/ else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      }
      this.isFull = true
    },
    /**退出F11全屏*/
    exitFullScreen() {
      if (!this.isFullScreen()) return
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
      this.isFull = false
    },
    /**判断是否全屏*/
    isFullScreen() {
      return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ? true : false
    },
  },
}
</script>

<style scoped lang="scss">
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);
.page-container {
  background: url('../../assets/img/bg.png') no-repeat center / 100% 100%;
  color: $mainColor;
  &:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  &.is-full {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
  }
}
.panel {
  margin: 5px;
}
.page-title {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  h1 {
    flex: 0 0 auto;
    margin: 0 10px;
  }
  .title-img {
    width: 40vw;
    height: 50px;
  }
  .top {
    position: absolute;
    top: -10px;
    right: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    .el-icon {
      margin-left: 10px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.page-tab {
  margin-top: -20px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  .tab-list {
    display: flex;
    justify-content: center;
    align-items: center;
    .item {
      width: 120px;
      height: 30px;
      border: 2px solid #ffffff;
      color: #ffffff;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 5vw;
      font-size: 16px;
      cursor: pointer;
      font-weight: bold;
      opacity: 0.8;
      &:hover {
        opacity: 1;
      }
      &.active {
        opacity: 1;
        border: 2px solid $mainColor;
        background: $mainColorOpcity;
        color: $mainColor;
      }
      &:nth-child(2) {
        margin-right: 40vw;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
.tab-content {
  width: 100%;
  height: calc(100% - 90px);
}
</style>
